<!--
1.使用zindex 谁在最后就显示谁
2.
-->
<template>
  <div id="map">
    <button @click="changeGaode">切换高德底图</button>
    <button @click="changeTile">切换卫星底图</button>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import 'ol/ol.css';


let map: Map | null = null;
// 定义多个底图源
const gaodeSources = new XYZ({
  url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
})

const gaodelayer = new TileLayer({
  source: gaodeSources
})

// 卫星
const weixingSources = new XYZ({
  url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}'
})

const weixingLayer = new TileLayer({
  source: weixingSources
})

// 标记
const markSources = new XYZ({
  url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=8&x={x}&y={y}&z={z}'
})
const markLayer = new TileLayer({
  source: markSources
})
const view = new View({
  center: [116.403851, 39.915168], // 北京市中心坐标
  zoom: 11,
  projection: 'EPSG:4326', // 使用Web Mercator投影
  extent: [73.66, 3.86, 135.05, 53.55] // 中国范围
})
onMounted(() => {
  map = new Map({
    target: 'map',
    view: view,
    layers: [weixingLayer, markLayer, gaodelayer],
  });
})
const changeGaode = () => {
  // 第一种 setZIndex
  // gaodelayer.setZIndex(100)
  // weixingLayer.setZIndex(99)
  // markLayer.setZIndex(98)

  // 第二种addLayer
  map?.addLayer(gaodelayer)

  // 第三种 setVisible
  // gaodelayer.setVisible(true)

}
const changeTile = () => {
  // gaodelayer.setZIndex(10)
  // weixingLayer.setZIndex(99)
  // markLayer.setZIndex(98)
  // 第二种
  map?.removeLayer(gaodelayer)
  // 第三种
  // gaodelayer.setVisible(false)
}


</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>
